<template>
  <a-drawer
    title="时空碰撞任务列表"
    style="height: 100%"
    :width="550"
    :mask="false"
    placement="left"
    :wrap-style="{ position: 'absolute' }"
    :visible="visible"
    wrapClassName="sk-left-drawer task_list_drawer"
    getContainer=".skpz"
    @close="close"
  >
    <div class="add-box">
      <a-input-search
        placeholder="请输入名称查询"
        enter-button="搜索"
        v-model="pageFilter.taskName"
        @search="onSearch"
        class="searchInput"
      />
      <a-button v-if="isOperation" type="primary" @click="openAddPop">创建任务</a-button>
    </div>
    <div class="skpz-table">
      <CustomTable
        ref="table"
        :showAlert="false"
        :columns="columns"
        :dataSource="pageData"
        :showSelection="false"
        :showPagination="true"
        rowKey="id"
        @change="onTableChange"
      >
        <template slot="action" slot-scope="text, record">
          <div class="editable-row-operations">
            <span>
              <a href="javascript:;" @click.stop="onDetail(record.id)">查看</a>
              <a href="javascript:;" class="font-gray" style="margin-left: 12px;" @click.stop="onYP(record.id)">研判</a>
            </span>
          </div>
        </template>
      </CustomTable>
    </div>
  </a-drawer>
</template>

<script>
import CustomTable from '@/components/zxd/Table/CustomTable'
import * as api from '@/api/wxSmuggle/eventModel.js'
export default {
  props: ['visible'],
  components: {
    CustomTable
  },
  data() {
    return {
      pageFilter: {
        pageNo: 1,
        pageSize: 10,
        incidentTaskId: this.$route.query.taskId
      },
      pageData: [
        // {
        //   id: 1,
        //   taskName: 'aaaa',
        //   time: 1649412993000,
        //   trackCount: 3,
        //   taskStatus: 0,
        //   unitId: 813,
        //   uuid: '7a0ef4df869b44f9a4bc04f413e6686e',
        //   createBy: 199,
        //   personNum: 0,
        //   skynetTaskId: 0
        // }
      ],
      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          width: 60,
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` //序号分页后连续
        },
        {
          title: '任务名称',
          dataIndex: 'taskName',
          width: 100,
          scopedSlots: { customRender: 'taskName' }
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          width: 120,
          scopedSlots: { customRender: 'createTime' }
        },
        {
          title: '轨迹数量',
          dataIndex: 'trackCount',
          width: 60,
          scopedSlots: { customRender: 'trackCount' }
        },
        // {
        //   title: '状态',
        //   dataIndex: 'taskStatus',
        //   width: 76,
        //   scopedSlots: { customRender: 'taskStatus' }
        // },
        {
          title: '匹配目标数',
          dataIndex: 'personNum',
          width: 80,
          scopedSlots: { customRender: 'personNum' }
        },
        {
          title: '操作',
          dataIndex: 'action',
          width: 100,
          scopedSlots: { customRender: 'action' }
        }
      ],
      isOperation: true
    }
  },
  mounted() {
    // this.refreshTable()
  },

  methods: {
    setOperation(val, taskId) {
      this.isOperation = val
      if (taskId != undefined) {
        this.pageFilter.incidentTaskId = taskId
      }
      this.refreshTable()
    },
    openAddPop() {
      this.$emit('addTask')
    },
    onSearch() {
      this.pageFilter.pageNo = 1
      this.refreshTable()
    },
    refreshTable() {
      this.loading = true
      api
        .selectTimeSpaceCollisionTaskList(this.pageFilter)
        .then(res => {
          if (res.success) {
            this.pageData = res.result
            this.loading = false
            // this.$refs.table.onClearRowKeys()
          } else {
            this.loading = false
          }
        })
        .catch(e => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.refreshTable()
    },
    // clickCustomRow(record, index) {
    //   var _this = this
    //   return {
    //     on: {
    //       // 事件
    //       click: () => {
    //         this.$emit('clickRow', record)
    //       }
    //     }
    //   }
    // },
    close(value) {
      this.$emit('close', value)
    },
    // onClickRow(row, n) {
    //   this.active = n
    //   this.$emit('on-click-row', row)
    // },
    onDetail(id) {
      this.$emit('clickDetail', id)
    },
    onYP(id) {
      this.$emit('clickPY', id)
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .ant-drawer-body {
  padding: 20px 0;
  .add-box {
    padding: 0px 20px 20px 10px;
    overflow: hidden;
    button {
      float: left;
      margin-left: 20px;
    }
    .searchInput {
      width: 300px;
      float: left;
    }
  }
}

// /deep/.ant-table-row {
//   cursor: pointer !important;
// }
</style>
